<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="<%=basePath%>script/jquery-ui-1.10.4/themes/base/jquery.ui.all.css">
<script src="<%=basePath%>script/jquery-ui-1.10.4/jquery-1.10.2.js"></script>
<script src="<%=basePath%>script/jquery-ui-1.10.4/ui/jquery.ui.core.js"></script>
<script src="<%=basePath%>script/jquery-ui-1.10.4/ui/jquery.ui.widget.js"></script>
<script src="<%=basePath%>script/jquery-ui-1.10.4/ui/jquery.ui.mouse.js"></script>
<script src="<%=basePath%>script/jquery-ui-1.10.4/ui/jquery.ui.sortable.js"></script>
<link rel="stylesheet" href="<%=basePath%>script/jquery-ui-1.10.4/demos/demos.css">
<script>
	$(function() {
		$(".column").sortable({
			connectWith : ".column"
		});

		$(".portlet").addClass(
				"ui-widget ui-widget-content ui-helper-clearfix ui-corner-all")
				.find(".portlet-header").addClass(
						"ui-widget-header ui-corner-all").prepend(
						"<span class='ui-icon ui-icon-minusthick'></span>")
				.end().find(".portlet-content");

		$(".portlet-header .ui-icon").click(
				function() {
					$(this).toggleClass("ui-icon-minusthick").toggleClass(
							"ui-icon-plusthick");
					$(this).parents(".portlet:first").find(".portlet-content")
							.toggle();
				});

		$(".column").disableSelection();
	});
</script>
<style>
	body { min-width: 520px; }
	.column { width: 350px; float: left; padding-bottom: 100px; }
	.portlet { margin: 0 1em 1em 0; }
	.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
	.portlet-header .ui-icon { float: right; }
	.portlet-content { padding: 0.4em; min-height: 150px;}
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 180px !important; }
	.ui-sortable-placeholder * { visibility: hidden; }
</style>
</head>
<body>

<div class="column">

	<div class="portlet">
		<div class="portlet-header">系统提醒</div>
		<div class="portlet-content">
			<p>
					<a href="javascript:;" style="color: red;">员工守则</a><br/>
					<a href="javascript:;" style="color: red;">考勤信息</a><br/>
					<a href="javascript:;" style="color: red;">清明放假通知：请仔细阅读</a><br/>
			</p>
		</div>
	</div>

	<div class="portlet">
		<div class="portlet-header">日程事务</div>
		<div class="portlet-content">
			<p>
					<a href="javascript:;" style="color: red;">■工作总结(17:30~18:00)</a><br/>
					<a href="javascript:;" style="color: red;">■月度会议(16:00~18:00)</a><br/>
					<a href="javascript:;" style="color: red;">■例会通知(10:00~11:00)</a><br/>
			</p>
		</div>
	</div>

</div>

<div class="column">

	<div class="portlet">
		<div class="portlet-header">收件箱</div>
		<div class="portlet-content">
			<p>
				<a href="javascript:;" style="color: red;">from xxx.@163.com(项目经理) :明天早上...</a><br/>
			</p>
		</div>
	</div>

</div>

<div class="column">

	<div class="portlet">
		<div class="portlet-header">待办流程</div>
		<div class="portlet-content"></div>
	</div>

</div>

</body>
</html>
